<template>
    <div class="basicWrapper">
        <el-row :gutter="20">
            <el-col :span="12">
                <h2 class="formH2">修改用户实名认证</h2>
                <span @click="handleBackTo()" class="handleBack">返回基本信息</span>
                <el-form :model="form" :rules="rules" ref="form" label-width="150px" class="demo-ruleForm"
                    v-loading="loading">
                    <el-form-item label="真实姓名" prop="realName">
                        <el-input v-model="form.realName"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="identityId">
                        <el-input @input="changeCard" v-model="form.identityId" placeholder="请输入身份证号"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-radio-group :disabled="true" v-model="form.sex">
                            <el-radio label="0">男</el-radio>
                            <el-radio label="1">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="专业领域" prop="managerIntroduction">
                        <el-input type="textarea" maxlength="500" show-word-limit v-model="form.managerIntroduction"
                            placeholder="请输入专业领域"></el-input>
                    </el-form-item>
                    <el-form-item class="newIpt" ref="headimgUpload1" label="身份证正面照片" prop="identityJust">
                        <p class="uploadTip">上传文件不超过10M，且只能上传jpg、png类型</p>
                        <el-upload class="avatar-uploader" :action="imageUploadUrl" :show-file-list="false"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-error="handleError">
                            <img v-if="imgUrl" :src="imgUrl" class="avatar">

                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <!-- <el-button @click="playVideob" class="previewb" icon="el-icon-search" circle></el-button> -->
                        <!-- <el-dialog :visible.sync="videoVisibleb" width="50%">
                            <div>
                                <img class="dialogImg" v-if="imgUrl" :src="imgUrl">
                            </div>
                        </el-dialog> -->
                    </el-form-item>
                    <el-form-item class="newIpt" ref="headimgUpload2" label="身份证反面照片" prop="identityBack">
                        <p class="uploadTip">上传文件不超过10M，且只能上传jpg、png类型</p>
                        <el-upload class="avatar-uploader" :action="imageUploadUrl" :show-file-list="false"
                            :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload" :on-error="handleError2">
                            <img v-if="imgUrl2" :src="imgUrl2" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <!-- <el-button @click="playVideoc" class="previewc" icon="el-icon-search" circle></el-button> -->
                        <!-- <el-dialog :visible.sync="videoVisiblec" width="50%">
                            <div>
                                <img class="dialogImg" v-if="imgUrl2" :src="imgUrl2">
                            </div>
                        </el-dialog> -->
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="submitForm()">立即修改</el-button>
                        <span style="margin-left:20px;" v-if="userInfo.iuiCertification=='1'">
                            <el-button  :disabled="userInfo.serveExpert==='1'||userInfo.serveExpert==='2'" type="primary" @click="submitApply()">申请成为专家</el-button>
                        </span>
                        
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import rulesUtil from "@/utils/rules"
import { getUserInfo2, changeReal, applyExpert, invitationGenerate, invitationViev } from "@/request/api/user"
export default {
    data() {
        return {
            videoVisiblea: false,
            videoVisibleb: false,
            videoVisiblec: false,
            videoVisibled: false,
            videoVisiblee: false,
            form: {
                managerIntroduction: "", //专业领域(500长文本)
                sex: "", //性别（0男 1女 2保密）
                identityId: "", //身份证号
                realName: "", //真实姓名
                identityJust: "", //身份证正面照片
                identityBack: "", //身份证反面照片

            },
            ming: '',
            rules: {
                sex: [
                    { required: true, message: '请选择', trigger: 'change' },
                ],
                identityId: [
                    { required: true, message: '请输入', trigger: 'blur' },
                ],
                realName: [
                    { required: true, message: '请输入真实姓名', trigger: 'blur' },
                ],
                identityJust: [
                    { required: true, message: '请上传', trigger: 'change' },
                ],
                identityBack: [
                    { required: true, message: '请上传', trigger: 'change' },
                ],

            },
            loading: true,
            imageUploadUrl: '/dev-api/file/upload/uploadNotQR',
            imgUrl: '',
            imgUrl2: '',
            imgUrl3: '',
            imgUrl4: '',
            userInfo:{}

        }
    },
    components: { ElImageViewer },
    created() {
        this.getInfo()
    },
    methods: {
        // 获取用户信息
        getInfo() {
            getUserInfo2().then(res => {
                console.log(res, '用户信息')
                if (res.data.code === 200) {
                    this.loading = false
                    this.userInfo=res.data.result
                    if (res.data.result.iuiCertification !== '0') {
                        this.form.realName = res.data.result.realName
                        this.form.sex = res.data.result.sex
                        this.form.managerIntroduction = res.data.result.managerIntroduction
                        this.form.identityId = res.data.result.identityId
                        this.form.identityJust = res.data.result.identityJust
                        this.imgUrl = res.data.result.identityJust
                        this.form.identityBack = res.data.result.identityBack
                        this.imgUrl2 = res.data.result.identityBack
                    }
                }
                this.loading = false
            })
        },
        // 输入身份证事件
        changeCard(val) {
            // let IDcard = val.target.value
            if (val.length == 18) {
                // 根据身份证号判断性别，并赋值
                let sex = val.substring(16, 17);// IDcard为用户输入的身份证号码
                var val = sex % 2 == 1 ? '男' : '女';
                if (val == '男') {
                    this.form.sex = '0'
                } else if (val == '女') {
                    this.form.sex = '1'
                }
            }
        },
        // 修改用户信息
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    console.log(this.form, '表单信息')
                    changeReal(this.form).then(res => {
                        if (res.data.code === 200) {
                            this.$message({
                                message: res.data.message,
                                type: "success",
                            });
                            this.getInfo()
                        } else {
                            this.$message.error(res.data.message);
                        }

                    })
                }
            })
        },
        // 申请成为专家
        submitApply() {
            this.$confirm("是否确认申请成为专家?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                applyExpert({}).then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: res.data.message,
                            type: "success",
                        });
                        this.getInfo()
                    } else {
                        this.$message.error(res.data.message);
                    }

                })
            });
        },
        //点击按钮时,触发弹出效果
        playVideoa() {
            //触发点击时,让其显示
            this.videoVisiblea = true
        },
        //点击按钮时,触发弹出效果
        playVideob() {
            //触发点击时,让其显示
            this.videoVisibleb = true
        },
        //点击按钮时,触发弹出效果
        playVideoc() {
            //触发点击时,让其显示
            this.videoVisiblec = true
        },
        //点击按钮时,触发弹出效果
        playVideod() {
            //触发点击时,让其显示
            this.videoVisibled = true
        },
        //点击按钮时,触发弹出效果
        playVideof() {
            //触发点击时,让其显示
            this.videoVisiblee = true
        },
        // 返回
        handleBackTo() {
            this.$emit('handleBacka')
            // this.$router.push("/basicInfo");
        },
        // 上传文件成功-身份证正面
        handleAvatarSuccess(response, file) {
            this.imgUrl = URL.createObjectURL(file.raw);
            this.form.identityJust = response.message;
            this.$refs.headimgUpload1.clearValidate(); // 关闭校验
        },
        // 上传文件失败-身份证正面
        handleError(err) {
            let errInfo = JSON.parse(err["message"]);
            this.$message.error(`文件上传失败，原因：${errInfo.message}`);
        },


        // 上传文件成功-身份证反面
        handleAvatarSuccess2(response, file) {
            this.imgUrl2 = URL.createObjectURL(file.raw);
            this.form.identityBack = response.message;
            this.$refs.headimgUpload2.clearValidate(); // 关闭校验
        },
        // 上传文件失败-身份证反面
        handleError2(err) {
            let errInfo = JSON.parse(err["message"]);
            this.$message.error(`文件上传失败，原因：${errInfo.message}`);
        },


        // 上传文件成功-人脸照片
        handleAvatarSuccess3(response, file) {
            this.imgUrl3 = URL.createObjectURL(file.raw);
            this.form.facePhoto = response.message;
            this.$refs.headimgUpload3.clearValidate(); // 关闭校验
        },
        // 上传文件失败-人脸照片
        handleError3(err) {
            let errInfo = JSON.parse(err["message"]);
            this.$message.error(`文件上传失败，原因：${errInfo.message}`);
        },


        // 上传文件成功-营业执照
        handleAvatarSuccess4(response, file) {
            this.imgUrl4 = URL.createObjectURL(file.raw);
            this.form.businessLicense = response.message;
            this.$refs.headimgUpload4.clearValidate(); // 关闭校验
        },
        // 上传文件失败-营业执照
        handleError4(err) {
            let errInfo = JSON.parse(err["message"]);
            this.$message.error(`文件上传失败，原因：${errInfo.message}`);
        },


        // 限制上传的类型
        beforeAvatarUpload(file) {
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (!isLt10M) {
                this.$message.error("上传图片大小不能超过 10M!");
                return false;
            }
            var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
            const extension = testmsg === "jpg" || testmsg === "JPG";
            const extension2 = testmsg === "png" || testmsg === "PNG";
            if (!extension && !extension2) {
                this.$message({
                    message: "上传图片只能是 jpg, png格式!",
                    type: "error",
                });
                return false;
            }
        },
    }
}
</script>
<style lang="less" scoped>
@import "./basicInfo.less";

/deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
    object-fit: contain;
}

.uploadTip {
    color: #666;
    font-size: 14px;
}

.previewa {
    margin-left: 180px;
    transform: translateY(-20px);
}

.previewb {
    margin-left: 180px;
    transform: translateY(-20px);


}

// .fdtu{
//     // visibility: hidden;
// }
// img:hover{
//     // transform: scale(1.3);
//     // display: block;

// }
.previewc {
    margin-left: 180px;
    transform: translateY(-20px);
}

.previewd {
    margin-left: 180px;
    transform: translateY(-20px);
}

.uploadTitle {
    font-size: 16px;
    color: #606266;
}

.formRight {
    text-align: center;
    padding-top: 100px;
}

.demo-ruleForm {
    margin-top: 20px;
}

.qy {
    height: 65px;
}

.addSite {
    transform: translateY(-62px);
    margin-left: 420px;

}

.dialogImg {
    max-width: 50%;
    display: block;
    margin: 0 auto;
}
</style>

